<template>
  <div class="code-select">
    <el-row style="line-height: 46px; min-height: 46px;">
      <el-col :span="12" style="padding: 0 10px;">
        <el-input class="tree-input" v-model="filterText" placeholder="请输入过滤条件" :suffix-icon="Search" />
      </el-col>
      <el-col :span="12">
        <p>已选：{{selectedData.length}}</p>
        <p class="clear" @click="handleClear">清空</p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-tree
          :data="props.treeData"
          show-checkbox
          node-key="value"
          :props="defaultProps"
          ref="treeRef"
          @check-change="handleCheckClick"
          :filter-node-method="filterNode"
          :default-expand-all = "true"
        />
      </el-col>
      <el-col :span="12">
        <ul>
          <li v-for="item in selectedData" :key="item">
            <p>{{item.label}}</p>
            <el-icon style="float: right;cursor:pointer;" color="#409EFC" @click="cancelNode(item)">
              <Close/>
            </el-icon>
          </li>
        </ul>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="text-align: center;">
        <el-button type="primary" @click="handleButton">确定</el-button>
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ElTree, ElMessage } from 'element-plus'
import { ref, watch, onMounted } from 'vue'
import { Search, Close } from '@element-plus/icons-vue'

const emit = defineEmits(['close-dialog', 'commit-selected'])
const treeRef = ref()
const dataTree = ref([])
const filterText = ref('')
const selectedData = ref([])
const props = defineProps({
  treeData: {
    type: Array,
    required: true
  },
  selected: {
    type: Array,
    default: () => []
  },
  allowCommitEmpty: {
    type: Boolean,
    default: false
  }
})

const filterNode = (value, data) => {
  if (!value) return true
  return data.label.includes(value)
}

watch(filterText, (val) => {
  treeRef.value.filter(val)
})

const defaultProps = {
  children: 'children',
  label: 'label'
}

onMounted(() => {
  if (props.selected && props.selected.length > 0) {
    treeRef.value.setCheckedKeys(props.selected)
  }
})

const handleClear = () => {
  treeRef.value.setCheckedKeys([])
}

const handleCheckClick = (node) => {
  if (!node.children || node.children.length === 0) {
    if (selectedData.value.includes(node)) {
      selectedData.value.splice(selectedData.value.indexOf(node), 1)
    } else {
      selectedData.value.push(node)
    }
  }
}

const cancelNode = (node) => {
  treeRef.value.setChecked(node.value, false)
}

const handleButton = () => {
  if (props.allowCommitEmpty || selectedData.value.length > 0) {
    console.log(treeRef.value.getCheckedNodes())
    emit('commit-selected', selectedData.value)
  } else {
    ElMessage.error('请选择数据')
  }
}

const handleClose = () => {
  emit('close-dialog')
}

</script>
<style lang="scss">
.el-dialog__body{
  padding: 10px 20px;
}

.code-select{
  width: 100%;

  .el-tree,ul {
    height: 360px;
    overflow-y: auto;
  }

  .el-col{
    border: 1px solid #f3f2f2;
  }

  p{
    display: inline-block;
    padding: 3px 10px;
    margin: 0;
  }

  .clear{
    float: right;
    color: #1a66b1;
    cursor:pointer;
  }

  li{
      padding: 3px;
    }

  li p {
    padding: 0;
    width: calc(100% - 100px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .el-button{
    margin: 5px;
  }
}

</style>
